<template>
    <div class="my-inte">
        <van-nav-bar
            :title="$t('wallet.inteTitle')"
            left-arrow
            @click-left="router.back()"
        />
        <div class="app-flex-bet my-inte-pad">
            <div class="my-inte-num">
                {{form.myInte}}
                <span class="my-inte-mini">{{ $t('wallet.inte') }}</span>
            </div>
            <div class="my-inte-btn" @click="onJump('/exchangeInte')">{{ $t('wallet.exchangeInte') }}</div>
        </div>
        <div class="my-inte-mini my-inte-pad">
            {{ $t('wallet.exchangeRate') }}: {{form.scale}}{{ $t('wallet.inte') }}={{ $t('moneyIcon') }}1
        </div>
    </div>
    <div class="my-inte-detail">
        {{ $t('wallet.inteDetail') }}
    </div>

    <div class="my-inte-cell">
        <van-cell 
            v-for="(item, index) in form.list" :key="index"
            :title="$t('wallet.inteIncome')" 
            :value="item.status == 0 ? '-' : '+' + item.integral" 
            center 
            :label="item.updateTime" />
    </div>
</template>
<script setup>
import { getUserIntegral, getIntegralRatio, getIntegralLog } from "@/api/card"
import { reactive, ref } from '@vue/reactivity';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from "vue-router"
const { t } = useI18n()
const router = useRouter()
function onJump (path) {
    console.log(form.myInte)
    router.push({
        path,
        query: {
            all: form.myInte,
            scale: form.scale
        }
    })
}
const form = reactive({
    cardNum: "",
    myInte: 0,
    list: [],
    scale: 0
})
// 获取用户积分余额 
getUserIntegral().then(res => {
    if (res.code != 200) return
    form.myInte = res.data
})
// 获取积分兑换金额比例 
getIntegralRatio().then(res => {
    console.log(res)
    if (res.code != 200) return
    form.scale = 1/res.data
})
// 获取积分明细
getIntegralLog().then(res => {
    console.log(res)
    form.list = res.data
})
</script>
<style lang="less">
.my-inte {
    position: relative;
    height: 135px;
    color: #fff;
    background: var(--title-background-color);
    --van-nav-bar-background-color: var(--title-background-color);
    &-pad {
        padding: 10px 20px 0;
    }
    &-num {
        font-size: 33px;
        line-height: 1;
        
        font-weight: bold;
    }
    &-btn {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        padding: 2px 20px;

        background: #fff;
        color: var(--title-background-color);
        border-radius: 30px;
        height: 20px;
        line-height: 20px;
    }
    &-mini {
        font-size: 12px;
    }
    .van-nav-bar__title, .van-nav-bar .van-icon {
        color: #fff;
    }
    .van-hairline--bottom:after {
        height: 0;
    }
}
.my-inte-detail {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #F0F3F5;
    line-height: 1;
    padding: 15px 27px;
    position: relative;
}
.my-inte-detail::before {
    background: var(--title-background-color);
    content: "  ";
    display: inline-block;
    width: 4px;
    height: 15px;
    position: absolute;
    top: 17px;
    left: 17px;
}
.my-inte-cell {
    height: calc(100vh - 182px);
    overflow: auto;
    .van-cell__title {
        font-size: 12px;
        color: #000;
    }
    .van-cell__label {
        color: #ccc;
    }
    .van-cell__value {
        font-size: 16px;
        font-weight: bold;
        color: #F57E0A;
    }
}
</style>